<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>课程管理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--<link th:href="@{/static/css/semantic.css}" rel="stylesheet" type="text/css">-->
    <script th:src="@{/static/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/static/js/template-web.js}"></script>
    <link th:href="@{/static/css/qinstyle.css}" rel="stylesheet">
    <link th:href="@{/static/layui-v2.5.5/css/layui.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/static/layui-v2.5.5/layui.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/common.js}"></script>
    <script th:src="@{/static/js/semantic.min.js}"></script>
    <!--semantic-ui 必须用这个 用路径下的不行 会缺失样式-->
    <link type="text/css" href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <!--<script type = "text/html" id = "hrefa">
        <a class = 'icon item' onclick = "{{ ftname }}({{ next }}, '{{ data.tCase }}', '{{ name }}')"><i
                class = 'right chevron icon'></i></a>
    </script>
    <script type = "text/html" id = "firstHref">
        <a class = 'icon item' onclick = "{{ ftname }}(1, '{{ ttCase.toString() }}', '{{ name }}')">首页</i></a>
    </script>
    <script type = "text/html" id = "before">
        <a class = 'icon item' onclick = "{{ ftname }}({{ before }}, '{{ data.tCase }}', '{{ name }}')"><i
                class = 'left chevron icon'></i></a>
    </script>-->
    <script>
        var content = [{title: "人体的奥秘"}, {title: "如何学好英语"}, {title: "大学生创新创业指导"}, {title: "婚恋指导"}, {title: "电影的艺术"}, {title: "戏剧欣赏"}, {title: "中药理学"}, {title: "网页设计"}, {title: "计算机网络导论"}, {title: "化妆品学"}, {title: "化学原理"}, {title: "大学生计算机基础课程"}, {title: "人工智能概论"}, {title: "音乐鉴赏"}, {title: "牛顿力学解析"}, {title: "天文学"}, {title: "药品的解析"}, {title: "深入JVM"}, {title: "爬虫原理"}, {title: "浮力概述"}, {title: "深入分布式"}, {title: "Shiro与spring security"}, {title: "zookeeper"}, {title: "有趣的python"},{title: "人体系统论"},{title: "药草认识大全"},{title: "做一个健康的程序员"},{title: "脱发原理"},{title: "引力的奥秘"}// etc
        ];
        function getName() {
            var ele = $("#user");
            var name1;
            if (ele.length > 0){
                name1 = ele.html();
            }
            //console.log("name1:"+ name1);
            return name1;
        }

        $(function () {
            //监听搜索框
            $("#search").mouseover(function () {
                //alert("sas");
                $("#search").search({
                    source: content,
                });
            });
            //var name = document.getElementById("user").innerHTML;  这个语句有问题 如果没有该id值 直接报错。而不是返回空
            //console.log(name);
            load(1, "");
        });


        //使用$.ajax()发送异步请求
        function load(page, tCase) {
            var fnname = getFnName(arguments.callee, 4);
            //console.log(fnname); //打印出来了
            var name = getName();
            console.log("load:" + name);
            $.ajax({
                url: "/course/getAll", // 请求路径
                type: "POST", //请求方式
                data: {"page": page, "limit": 8, "username": name}, //默认 每页8条数据。
                dataType: "json",//data:{"username":"jack","age":23}, //  方式二 推荐使用这种方式
                success: function (data) {  //这里的data可以随便命名 不过还是有点规则好一些
                    //alert(data);           //如result
                    fill(fnname, data, name);
                },//响应成功后的回调函数
                error: function () {
                    alert("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
                //dataType:"application/json"//设置接受到的响应数据的格式
            });
        };

        //根据课程类型搜索课程
        function selectCoursesByType(page, courseType) {
            var fnname = getFnName(arguments.callee, 19);
            //console.log("---"+fnname); //打印出来了
            var name = getName();
            console.log("selectCoursesByType:" + name);
            $.ajax({
                url: "/course/getCourseByType", // 请求路径
                type: "POST", //请求方式
                data: {"page": page, "limit": 8, "username": name, "courseType": courseType}, //默认 每页8条数据。
                dataType: "json", success: function (data) {  //这里的data可以随便命名 不过还是有点规则好一些
                    //alert(data);           //如result
                    //console.log(name + " ==== "); //拿到值了
                    fill(fnname, data, name);
                },//响应成功后的回调函数
                error: function () {
                    alert("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
                //dataType:"application/json"//设置接受到的响应数据的格式
            });
        };

        //根据课程所属学院搜索课程
        function selectCoursesBycollege(page, collegeName) {
            var fnname = getFnName(arguments.callee, 22);
            //console.log("---"+fnname); //打印出来了
            var name = getName();
            console.log("selectCoursesByCollege:" + name);
            $.ajax({
                url: "/course/getCourseByCollege", // 请求路径
                type: "POST", //请求方式
                data: {"page": page, "limit": 8, "username": name, "college": collegeName}, //默认 每页8条数据。
                dataType: "json", success: function (data) {  //这里的data可以随便命名 不过还是有点规则好一些
                    //alert(data);           //如result
                    //console.log(name + " ==== "); //拿到值了
                    fill(fnname, data, name);
                },//响应成功后的回调函数
                error: function () {
                    alert("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
                //dataType:"application/json"//设置接受到的响应数据的格式
            });
        };

        //根据课程剩余人数查找课程
        function selectByCount(page, count) {
            var fnname = getFnName(arguments.callee, 13);
            //console.log("---"+fnname); //打印出来了
            var name = getName();
            console.log("selectByCount:" + name);
            $.ajax({
                url: "/course/selectCourseByMemberCount", // 请求路径
                type: "POST", //请求方式
                data: {"page": page, "limit": 8, "username": name, "count": count}, //默认 每页8条数据。
                dataType: "json", success: function (data) {  //这里的data可以随便命名 不过还是有点规则好一些
                    //alert(data);           //如result
                    //console.log(name + " ==== "); //拿到值了
                    fill(fnname, data, name);
                },//响应成功后的回调函数
                error: function () {
                    alert("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
                //dataType:"application/json"//设置接受到的响应数据的格式
            });
        };

        //根据名称搜索课程
        function selectByCourseName(page,courseName){
            var fnname = getFnName(arguments.callee, 18);
            //console.log(fnname); //打印出来了
            var name = getName();
            console.log("search:" + name);
            //console.log(searchText);
            $.ajax({
                url:"/course/selectByCourseName", // 请求路径
                type:"POST", //请求方式
                data:{"page":page,"limit":8,"courseName":courseName,"username":name}, //默认 每页8条数据。
                dataType:"json",//data:{"username":"jack","age":23}, //  方式二 推荐使用这种方式
                success:function(data){  //这里的data可以随便命名 不过还是有点规则好一些
                    fill(fnname,data,name);
                },//响应成功后的回调函数
                error:function(){
                    alert("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
                //dataType:"application/json"//设置接受到的响应数据的格式
            });
        };


        //填充表格数据!
        function fill(ftname, data, name) {
            $("#pageNum").html("");
            $("#tbody").html("");
            //1.1展示总页码以及总记录数
            $("#totalPage").html(data.totalPage);
            $("#totalCount").html(data.totalCount);
            //console.log(ttCase);
            console.log("fill:" + name);
            console.log("ftname:" + ftname);
            var start;
            var end;
            //要显示5个页码
            if (data.totalPage < 5) {
                //不够10页
                start = 1;
                end = data.totalPage;
            } else {
                //实现前二后二效果
                start = data.currentPage - 2;
                end = data.currentPage + 2;
                if (start < 1) {
                    start = 1;
                    end = start + 4;
                }

                if (end > data.totalPage) {
                    end = data.totalPage;
                    start = end - 4;
                }
            }
            //1.2 展示分页页码 onclick="selectOrCancel(' + course.courseId + ',' + true + ')">' +
            var lis = "";
            //var firstPage = template("firstHref",{
            //    ftname:ftname,ttCase:ttCase,name:name,
            //}); //展示首页
            var firstPage = "<a class=\"item\" onclick=\"" + ftname + "(" + 1 + ",'" + data.tCase + "'" + ")\">首页</a>";
            //console.log(firstPage);
            var before = data.currentPage - 1;
            if (before == 0) {
                before = 1;
            }

            //展示 上一页 即 "＜"
            //var beforePage = template("before",{ftname:ftname,before:before,data:data,name:name});;
            var beforePage = "<a class = 'icon item' onclick = \"" + ftname + "(" + before + ",'" + data.tCase + "'" + ")\"><i\n" + "class = 'left chevron icon'></i></a>"
            var next = data.currentPage + 1;

            if (next >= data.totalPage) {
                next = data.totalPage;
            }
            lis += firstPage;
            lis += beforePage;

            //展示 中间显示数字页码

            for (var j = start; j <= end; j++) {
                //判断当前页码是否等于i
                //创建页码li
                var p;
                if (data.currentPage == j) {
                    p = "<a class=\"active item\" onclick=\"" + ftname + "(" + j + ",'" + data.tCase + "'" + ")\">" + j + "</a>";
                } else {
                    p = "<a class=\"item\" onclick=\"" + ftname + "(" + j + ",'" + data.tCase + "'" + ")\">" + j + "</a>";
                }
                lis += p;
            }
            //展示 下一页 即"＞" 与 尾页
            //let html = template("hrefa",{ftname:ftname,next:next,data:data,name:name});
            var nextPage = "<a class = 'icon item' onclick = \"" + ftname + "(" + next + ",'" + data.tCase + "'" + ")\"><i\n" + "class = 'right chevron icon'></i></a>";
            var lastPage = "<a class=\"item\" onclick=\"" + ftname + "(" + data.totalPage + ",'" + data.tCase + "'" + ")\">尾页</a>";
            lis += nextPage;
            lis += lastPage;


            //展示数据表格信息
            var list = "";
            for (var i = 0; i < data.data.length; i++) {
                var course = data.data[i];
                var tr = "<tr ";
                if(course.stock == 0){
                    tr += "class=\"error\"";
                    tr = tr + ">\n" + "<th>" + course.courseId + "</th>\n" + "<th>" + course.collegeName + "</th>\n" + "<th>" + course.courseName + "</th>\n" + "<th>" + course.teacher + "</th>\n" + "<th>" + course.type + "</th>\n" + "<th>" + course.courseScore + "</th>\n" + "<th>" + "已满人" + "</th>\n" + "<th>" + course.address + "</th>\n";
                }else{
                    if (course.stock <= 10 && course.stock > 0){
                        tr += "class=\"error\"";
                    }else if (course.stock > 10 && course.stock <= 25){
                        tr += "class=\"warning\"";
                    }
                    tr = tr + ">\n" + "<th>" + course.courseId + "</th>\n" + "<th>" + course.collegeName + "</th>\n" + "<th>" + course.courseName + "</th>\n" + "<th>" + course.teacher + "</th>\n" + "<th>" + course.type + "</th>\n" + "<th>" + course.courseScore + "</th>\n" + "<th>" + course.stock + "</th>\n" + "<th>" + course.address + "</th>\n";
                }
                if (course.isHide == 1) {
                    tr += "<td> <div class = \"ui animated fade button\" onclick=\"show('" + course.courseId + "','" + true + "','" + name + "','" + ftname + "','" + data.currentPage + "','" + data.tCase + "'" + ")\">" + "<div class = \"visible content\"><i class = \"check icon\"></i>已开放显示</div>" + "<div  class = \"hidden content\"><i  class = \"genderless icon\"></i>隐藏</div>" + "</div></td>";
                } else {
                    tr += "<td><button id=\"select\" class = \"ui twitter button\" onclick=\"hideOrShowCourse('" + course.courseId + "','" + false + "','" + name + "','" + ftname + "','" + data.currentPage + "','" + data.tCase + "'" + ")\">" + "<i class = \"plus icon\"></i>开放显示</button></td>";
                }
                tr += "</tr>\n";
                list += tr;
            }
            //改变内容
            $("#pageNum").html(lis);
            $("#tbody").html(list);
        };

        //弹框提示。
        function show(courseId, flag, name, ftnamme, page, tCase) {
            //console.log('******************* ' + courseId + "--" + flag + "--" + name + "--" + ftnamme + "--" + page + "--" + tCase);
            $('#alertUI').modal({
                onApprove: () => {
                    //console.log(courseId + "--" + flag + "--" + name + "--" + ftnamme + "--" + page + "--" + tCase);
                    hideOrShowCourse(courseId,flag,name,ftnamme,page,tCase);
                }
            }).modal('show');
        }

        //选择课程或取消课程
        function hideOrShowCourse(courseId, flag, name, ftnamme, page, tCase) {
            //var name = getName();
            console.log("flag:" + flag);
            if (flag) {
                $.ajax({
                    url: "course/hideBatch", // 请求路径
                    type: "POST", //请求方式
                    data: {"courseId": courseId, "username": name}, //  方式二 推荐使用这种方式
                    success: function (data) {  //这里的data可以随便命名 不过还是有点规则好一些
                        $('#msg').text(data.msg);
                        $('#alertMsg').modal('show');
                        eval(""+ftnamme+"('"+page+"','"+tCase+"')");
                    },//响应成功后的回调函数
                    error: function () {
                        alert("出错啦...")
                    },//表示如果请求响应出现错误，会执行的回调函数
                });
            } 
            //console.log(name + "----" + courseId + "----" + flag);
        };

        //获取函数名.
        var getFnName = function (callee, length) {
            var _callee = callee.toString().replace(/[\s\?]*/g, ""), comb = _callee.length >= 50 ? 50 : _callee.length;
            _callee = _callee.substring(8, 8 + length);
            //console.log(_callee); //验证成功。
            return _callee;
        };

        //监听搜索框回车
        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 13) {
                sub();
            }
        };

        function sub(){
            //var searchText = $("#searchText").val();
            var searchText = document.getElementById("searchText").value;
            //console.log(searchText);
            if (searchText.length > 0) {
                //alert("搜索框回车监听:" + searchText + "---");
                selectByCourseName(1,searchText);
            }else{
                $("#msg").html("请输入搜索内容");
                $("#alertMsg").modal('show');
            }
        };
    </script>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            overflow: auto;
            margin: 0;
        }

        html {
            overflow-y: scroll;
        }
    </style>
</head>
<body>
<!--主容器-->
<div class="ui container" th:width="1500px">

    <div class="ui segment" id="index-header-nav" th:fragment="nav-menu">
        <div class="ui secondary menu" sec:authorize="isAuthenticated()">  <!--如果登录了 就展示相关信息-->
            <a class="item" th:href="@{/}">首页</a>
            <span class="hidden" hidden="hidden" id="user" sec:authentication="name"></span>
            <div class="right menu" sec:authorize="hasAuthority('admin')">
                <div class="right menu"> <!--展示相对于权限的东西-->
                    <a class="item" th:href="@{/courseManage}">
                        <i class="table icon"></i>
                        课程管理
                    </a>
                    <a class="item" th:href="@{/manager}">
                        <i class="icon user"></i>
                        学生选课统计
                    </a>
                    <a class="item">
                        欢迎你,<span sec:authentication="name"></span>
                    </a>
                    <a class="item" href="/logout">
                        <i class="sign-out icon"></i>注销
                    </a>
                </div>
            </div>

        </div>
    </div>
    <div class="ui small test modal" id="alertUI">
        <i class="close icon"></i>
        <div class="header">
            退选课程
        </div>
        <div class="content">
            <p>你确定要隐藏课程吗？</p>
        </div>
        <div class="actions">
            <div class="ui negative button">
                取消
            </div>
            <div class="ui positive button">
                确定
            </div>
        </div>
    </div>
    <div class="ui small test modal" id="alertMsg">
        <i class="close icon"></i>
        <div class="header">
            信息
        </div>
        <div class="content">
            <p id="msg"></p>
        </div>
        <div class="actions">
            <div class="ui positive button" onclick="">
                确定
            </div>
        </div>
    </div>

    <div class="ui segment" style="text-align: center">
        <h3>网上在线选课系统</h3>
    </div>

    <div>
        <br>
        <div class="ui one column stackable grid">
            <div class="column">
                <div class="ui raised segment">
                    <div class="ui">
                        <div class="content">
                            <h5 class="content">所属学院</h5>
                            <hr>
                            <span><a href="#" onclick="selectCoursesBycollege(1,'计算机学院')"><i
                                    class="circle outline icon"></i>计算机学院</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesBycollege(1,'中药学院')"><i
                                    class="circle outline icon"></i>中药学院</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesBycollege(1,'外国语学院')"><i
                                    class="circle outline icon"></i>外国语学院</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesBycollege(1,'健康学院')"><i
                                    class="circle outline icon"></i>健康学院</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesBycollege(1,'物理学院')"><i
                                    class="circle outline icon"></i>物理学院</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesBycollege(1,'艺术学院')"><i
                                    class="circle outline icon"></i>艺术学院</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesBycollege(1,'信息学院')"><i
                                    class="circle outline icon"></i>信息学院</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesBycollege(1,'化学学院')"><i
                                    class="circle outline icon"></i>化学学院</a></span>&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="ui raised segment">
                    <div class="ui">
                        <div class="content">
                            <h5 class="content">课程类型</h5>
                            <hr>
                            <span><a href="#" onclick="selectCoursesByType(1,'人文科学类')"><i
                                    class="circle outline icon"></i>人文科学类</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesByType(1,'公共艺术类')"><i
                                    class="circle outline icon"></i>公共艺术类</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesByType(1,'创新创业类')"><i
                                    class="circle outline icon"></i>创新创业类</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesByType(1,'数学科学类')"><i
                                    class="circle outline icon"></i>数学科学类</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesByType(1,'程序艺术类')"><i
                                    class="circle outline icon"></i>程序艺术类</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesByType(1,'自然科学类')"><i
                                    class="circle outline icon"></i>自然科学类</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectCoursesByType(1,'限定艺术类')"><i
                                    class="circle outline icon"></i>限定艺术类</a></span>&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                </div>
            </div>

            <div class="column">
                <div class="ui raised segment">
                    <div class="ui">
                        <div class="content">
                            <h5 class="content">课程剩余人数</h5>
                            <hr>
                            <span><a href="#" onclick="selectByCount(1,50)"><i
                                    class="circle outline icon"></i>&ge;50人</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectByCount(1,30)"><i
                                    class="circle outline icon"></i>30-50人</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectByCount(1,10)"><i
                                    class="circle outline icon"></i>10-30人</a></span>&nbsp;&nbsp;&nbsp;
                            <span><a href="#" onclick="selectByCount(1,0)"><i class="circle outline icon"></i>10人以下</a></span>&nbsp;&nbsp;&nbsp;
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="ui segment" th:fragment="nav-menu">
            <span class="ui secondary menu">
            <div id="search" class="ui search">
            <div class="ui icon input">
                <input id="searchText" class="prompt" type="text" placeholder="搜索课程">
                <span class="ui icon button" onclick="sub()">
                <i class="search icon"></i><a href="#">搜索</a>
                </span>
                <span class="right menu">
                   <a class="item" th:href="@{/addCourse}">
                       <i class="plus icon"></i>
                       添加课程
                   </a>
                </span>
            </div>
            <div class="results"></div>
            </div>
            </span>
        <table class="ui selectable celled table" id="courseTable" style="text-align: center">
            <thead>
            <tr>
                <th>课程号</th>
                <th>所属学院</th>
                <th>课程名称</th>
                <th>任课老师</th>
                <th>课程类型</th>
                <th>学分</th>
                <th>剩余人数</th>
                <th>上课时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
            <tr class="error">
                <td>1</td>
                <td>医药信息学院</td>
                <td>大学生创新创业指导</td>
                <td>罗曼</td>
                <td>创新创业</td>
                <td>2</td>
                <td>50</td>
                <td>b1-201</td>
                <td>
                    <button class="ui twitter button">
                        <i class="plus icon"></i>
                        选择
                    </button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>医药信息学院</td>
                <td>大学生创新创业指导</td>
                <td>罗曼</td>
                <td>创新创业</td>
                <td>2</td>
                <td>50</td>
                <td>b1-201</td>
                <td>
                    <div class="ui animated fade button" onclick="selectOrCancel(1,null)">
                        <div class="visible content">
                            <i class="check icon"></i>
                            已选
                        </div>
                        <div class="hidden content">
                            <i class="genderless icon"></i>
                            退选
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <th colspan="9">
                    共<i id="totalPage">12</i>页,<i id="totalCount">132</i>条数据
                    <div class="ui right floated pagination menu" id="pageNum">
                        <a class="item">首页</a>
                        <a class="icon item">
                            <i class="left chevron icon"></i>
                        </a>
                        <a class="item">1</a>
                        <a class="item">2</a>
                        <a class="item">3</a>
                        <a class="item">4</a>
                        <a class="icon item">
                            <i class="right chevron icon"></i>
                        </a>
                        <a class="item">尾页</a>
                    </div>
                </th>
            </tr>
            </tfoot>
        </table>
    </div>

    </div>

</body>

</html>